<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>

<!DOCTYPE html>
<html>
<head>
<title>WebShop</title>

<link href="/resources/css/bootstrap/bootstrap.css" rel="stylesheet">


<link href="/resources/css/catalog.css" rel="stylesheet">
<link href="/resources/css/font-awesome/css/font-awesome.css"
	rel="stylesheet">

<script type="text/javascript" src="/resources/js/jquery/jquery.js"></script>
<script type="text/javascript"
	src="/resources/js/bootstrap/bootstrap.js"></script>
<script src="/resources/js/angular/angular.js"></script>
<script src="/resources/js/angCatalog.js"></script>

</head>
<body ng-app="catalog">

	<jsp:include page="/resources/pageComponents/header.jsp" />


	<div ng-controller="categoryController">
		<ul class="nav">
			<li>

				<p id="currentCategoryName">Current category: {{
					currentCategoryName }}</p>
			</li>
		</ul>
	</div>

	<input type="hidden" id="currentCategory" value="${currentCategory}">
	<input type="hidden" id="currentPage" value="1">
	<input type="hidden" id="pagesCount" value="${pagesCount}">
	<input type="hidden" id="userId" value="${userId}">

	<div class="container">
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-9">
				<ul class="nav nav-tabs">


					<li>
						<p class="navbar-text navbar-right">Products to show:</p>

					</li>
					<li>
						<ul class="nav navbar-nav navbar-right">
							<li><select class="selectpicker productsToShow">
									<option>30</option>
									<option>60</option>
									<option>90</option>
							</select></li>
						</ul>
					</li>


					<li>
						<p class=" navbar-text navbar-right">Sort by:</p>

					</li>

					<li>

						<ul class="nav navbar-nav navbar-right">
							<li><select class="selectpicker sorting">
									<option></option>
									<option>name</option>
									<option>price</option>
							</select></li>
						</ul>
					</li>

					<li>
						<p class=" navbar-text navbar-right">Sorting direction:</p>

					</li>

					<li>

						<ul class="nav navbar-nav navbar-right">
							<li><select class="selectpicker sortingDirection">
									<option>Ascending</option>
									<option>Descending</option>
							</select></li>
						</ul>
					</li>

				</ul>
			</div>
		</div>
		<div class="col-md-12">
			<div class="col-md-4">

				<div class="row">


					<ul class="nav nav-tabs">
						<li class="dropdown"><a class="dropdown-toggle"
							data-toggle="dropdown">Product categories<span class="caret"></span>
						</a>
							<ul class="dropdown-menu categories">
								<c:forEach items="${categories}" var="category">

									<li class="text-center"><c:choose>
											<c:when test="${category.isParent}">
												<a href="#" id="${category.idCategory}"
													class="categoryButtonParent" data-stopPropagation="true">${category.name}
													<i class="fa fa-angle-right"></i>
												</a>
											</c:when>
											<c:otherwise>
												<a href="#" id="${category.idCategory}"
													class="categoryButtonChild">${category.name}</a>
											</c:otherwise>
										</c:choose></li>

								</c:forEach>
							</ul></li>

					</ul>
				</div>
			</div>

			<div class="col-md-8">
				<div class="products">

					<c:choose>

						<c:when test="${!empty products}">
							<c:forEach items="${products}" var="orderedProduct">
								<div class="col-md-3">




									<img class="img-responsive"
										id="${orderedProduct.product.idProduct}"
										src="/resources/img/${orderedProduct.product.idProduct}.gif" />

									<h2>${orderedProduct.product.productName}</h2>
									<p>${orderedProduct.product.description}</p>
									<p>${orderedProduct.product.price}$</p>
									<p>
										<sec:authorize access="isAuthenticated()">
										Your rating:  <select class="rateProduct"
												id="${orderedProduct.product.idProduct}">

												<c:forEach var="rate" begin="1" end="5">
													<c:choose>
														<c:when
															test="${orderedProduct.ratingDTO.ratingValue == rate}">
															<option selected="selected">${rate}</option>
														</c:when>
														<c:otherwise>
															<option>${rate}</option>
														</c:otherwise>
													</c:choose>
												</c:forEach>


											</select>

										</sec:authorize>
										Avg rating: ${orderedProduct.ratingDTO.avgRating}
									</p>
									<div class="orderHandlerDiv${orderedProduct.product.idProduct}">
										<input type="text"
											id="add_${orderedProduct.product.idProduct}" min="1" max="99"
											maxlength="2" size="2">
										<button class="btn btn-default addProductButton" type="button"
											value="${orderedProduct.product.idProduct}">
											<i class="fa fa-plus"></i>
										</button>
										<c:choose>
											<c:when test="${orderedProduct.count == 0}">
												<button class="btn btn-default removeProductButton"
													type="button" value="${orderedProduct.product.idProduct}"
													id="delete_${orderedProduct.product.idProduct}"
													style="display: none;">
													<i class="fa fa-minus"></i>
												</button>
											</c:when>
											<c:otherwise>
												<button class="btn btn-default removeProductButton"
													type="button" value="${orderedProduct.product.idProduct}"
													id="delete_${orderedProduct.product.idProduct}">
													<i class="fa fa-minus"></i>
												</button>
											</c:otherwise>
										</c:choose>
										<c:if test="${orderedProduct.count!=0}">
											<c:choose>
												<c:when test="${orderedProduct.count ==1}">
													<p
														id="currentProductOrderAmount${orderedProduct.product.idProduct}">You
														have ${orderedProduct.count} item of this product in your
														basket</p>
												</c:when>
												<c:otherwise>
													<p
														id="currentProductOrderAmount${orderedProduct.product.idProduct}">You
														have ${orderedProduct.count} items of this product in your
														basket</p>
												</c:otherwise>
											</c:choose>
										</c:if>
									</div>

								</div>
							</c:forEach>
						</c:when>
						<c:otherwise>
							<div class="alert alert-danger">There is no products in
								${currentCategoryName} category</div>
						</c:otherwise>
					</c:choose>
				</div>

			</div>

			<div class="row">
				<ul class="pagination">
					<c:choose>
						<c:when test="${!empty pages}">
							<li><input type="button" value="Prev" class="buttonPrev"></li>

							<c:forEach items="${pages}" var="page">
								<li><input type="button" value="${page}"
									class="changePageButton"></li>
							</c:forEach>

							<li><input type="button" value="Next" class="buttonNext"></li>
						</c:when>
					</c:choose>
				</ul>

			</div>
		</div>
	</div>



</body>
</html>